import React from 'react';
import './HomeNavs.scss';
import { Grid } from 'antd-mobile';
import { Link, useNavigate } from 'react-router-dom';
import SvgIcon from '@/components/SvgIcon/SvgIcon';
import { ConsultType } from '@/enum';
import { useEnhanceDispatch } from '@/hooks';
import { setConsultType } from '@/store/modules/consultStore';

const HomeNavs: React.FunctionComponent = () => {
  const navigate = useNavigate();
  const enhanceDispatch = useEnhanceDispatch();

  /**
   * 第一步：用于跳转对应路由并且记录问诊类型的回调函数
   * */
  const goToConsultType = (consultTyp: ConsultType, path: string) => {
    enhanceDispatch(setConsultType(consultTyp));
    navigate(path);
  };

  return (
    <div className="home-navs">
      <Grid columns={3}>
        <Grid.Item onClick={() => goToConsultType(1, '/consult-doctor')}>
          <a className="nav">
            <SvgIcon name="doctor" width="47px" height="47px"></SvgIcon>
            <p className="title">问医生</p>
            <p className="desc">按科室查问医生</p>
          </a>
        </Grid.Item>
        <Grid.Item onClick={() => goToConsultType(2, '/consult-fast')}>
          <a className="nav">
            <SvgIcon name="graphic" width="47px" height="47px"></SvgIcon>
            <p className="title">极速问诊</p>
            <p className="desc">20s医生极速回复</p>
          </a>
        </Grid.Item>
        <Grid.Item onClick={() => goToConsultType(3, '/consult-medicine')}>
          <a className="nav">
            <SvgIcon name="prescribe" width="47px" height="47px"></SvgIcon>
            <p className="title">开药问诊</p>
            <p className="desc">线上买药更方便</p>
          </a>
        </Grid.Item>
      </Grid>
      <Grid columns={4}>
        <Grid.Item>
          <Link to="/" className="nav min">
            <SvgIcon name="order" width="33px" height="33px"></SvgIcon>
            <p className="title">药品订单</p>
          </Link>
        </Grid.Item>
        <Grid.Item>
          <Link to="/patient" className="nav min">
            <SvgIcon name="docs" width="33px" height="33px"></SvgIcon>
            <p className="title">健康档案</p>
          </Link>
        </Grid.Item>
        <Grid.Item>
          <Link to="/" className="nav min">
            <SvgIcon name="rp" width="33px" height="33px"></SvgIcon>
            <p className="title">我的处方</p>
          </Link>
        </Grid.Item>
        <Grid.Item>
          <Link to="/" className="nav min">
            <SvgIcon name="find" width="33px" height="33px"></SvgIcon>
            <p className="title">疾病查询</p>
          </Link>
        </Grid.Item>
      </Grid>
    </div>
  );
};

export default HomeNavs;